<html>

	<head>
		<meta charset="UTF-8">
		<title>LingPowerAI</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script type="text/javascript">
			document.write("<script src='../../js/fix.js?rd=?rd=" + Math.random() + "'><\/script>");
		</script>
		<script type="text/javascript">
			link();
		</script>
		<style>
			.mui-content .box {
				margin: 0.1rem 0px;
			}
			
			.titleDiv {
				height: 0.3rem;
			 line-height: 0.38rem;
			}
			
			.healthDiv {
				margin: 0.1rem 0px;
				display: inline-block;
			}
			
			.healthStar {
				padding: 0.05rem;
				text-align: center;
				color: #47BAFE;
			}
			
			.healthStar span{
				font-size: 0.18rem;
			}
			
			.healthContent {
				padding: 0.05rem;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
			}
			
			.healthContent span:first-child{
				width: 0.2rem;
				height: 0.2rem;
				font-size: 0.24rem;
				flex: 1;
			}
			
			.healthContent span:last-child{
				width: 88%;
				flex: 9;
			}
			
		/* 	.healthContent div:first-child span{
				font-size: 30px; 
			} */
			
			.chart {
				height: 2.5rem;
				margin: 0px;
				padding: 0px;
				width: 100%;
			}
			
			.customerPie {
				margin: 0.1rem 0px; display: flex; text-align: center;
			}
			
			.pieDiv {
				width: 50%; float: left;
			}
			
			.piechart {
				height: 1.5rem; width: 100%; margin: 0px; padding: 0px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">客户分析</h1>
		</header>

		<div class="mui-content">
			<!-- 		<div class="box">
				<div class="titleDiv">
					<span class="littlebluespan"></span>
					<b>客户健康度分析</b>
				</div>
				<div class="shi-line-gray"></div>
				<div class="healthDiv">
					<div class="healthStar"> -->
			<!-- TODO 动态生成星级 -->
			<!-- 			<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
						<span class="fa fa-star-o"></span>
					</div> -->
			<!-- 		<div class="healthContent">
						<span class="fa fa-smile-o common-font-color-blue"></span>
						<span>客户资源分布比较多元，且平均资产较高，大额产品销售潜力较大</span>
					</div>
					<div class="healthContent">
						<span class="fa fa-exclamation-circle common-font-color-red"></span>
						<span>客户资源的平均年龄较大，需加强年轻客户的经营</span>
					</div>
				</div>
			</div> -->

			<div class="box">
				<div class="titleDiv">
					<span class="littlebluespan"></span>
					<b>灵豹分分布趋势</b>
				</div>
				<div class="shi-line-gray"></div>
				<div style="text-align: center; margin: auto;">
					<div class="chart" id="barChart"></div>
				</div>
			</div>

			<div class="box">
				<div class="titleDiv">
					<span class="littlebluespan"></span>
					<b>客户画像</b>
				</div>
				<div class="shi-line-gray"></div>
				<div class="customerPie">
					<div class="pieDiv">
						<h4>性别分布</h4>
						<div id="pieChart1" class="piechart"></div>
					</div>
					<div class="pieDiv">
						<h4>婚姻子女</h4>
						<div id="pieChart2" class="piechart"></div>
					</div>
				</div>
				<div class="customerPie">
					<div class="pieDiv">
						<h4>年龄分布</h4>
						<div id="pieChart3" class="piechart"></div>
					</div>
					<div class="pieDiv">
						<h4>资产分布</h4>
						<div id="pieChart4" class="piechart"></div>
					</div>
				</div>
			</div>

			<!-- 	<div class="box">
				<div class="titleDiv">
					<span class="littlebluespan"></span>
					<b>客户特征</b>
				</div>
				<div class="shi-line-gray"></div>
				<div style="margin: 10px 0px; text-align: center;">
					<img src="../../images/customer/weixinnicheng.png" />
				</div>
			</div> -->
		</div>

		<script type="text/javascript">
			script(["../../libs/echarts/echarts-all.js"]);
		</script>
		<script>
			mui.init();

			mui.plusReady(function() {
				// mui.ready(function() {
				storage.init();
				storageUser = kidstorageuser.getInstance();

				request("/cmdb/queryScoreTrend/", {
					sales_id: storageUser.UId
				}, function(data) {
					let time = [];
					let high = [];
					let middle = [];
					let low = [];
					let r = data.DATASET;
					let rdata=JSON.stringify(r[0]).toString().split('{')[1].split('}')[0];
					if(r.length<=1 && rdata==""){
						time.push(new Date().getFullYear()+"-"+new Date().getMonth()+"-"+new Date().getDay());
						high.push("0");
						middle.push("0");
						low.push("0");
					}else{
						for (let i = 0; i < r.length; i++) {
							time.push(r[i].act_ym);
							high.push(r[i].high);
							middle.push(r[i].middle);
							low.push(r[i].low);
						}
					}
					
					// alert(JSON.stringify(score_lvarr));
					var barChartDiv = document.getElementById("barChart");
					var barChart = echarts.init(barChartDiv);
					//生成业务趋势图
					var barChartOption = {
						color: ['#6fd5ff', '#18b6ff', '#0092ee'],
						toolbox: {
							show: true,
							feature: {
								saveAsImage: {
									show: true
								}
							}
						},
						legend: {
							data: ["低", "中", "高"]
						},
						grid: {
							x: 40,
							y: 40,
							x2: 5,
							y2: 30,
							containLabel: true
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow' //阴影，若需要为直线，则值为'line'
							},
							backgroundColor: 'rgba(255,255,255,0.8)',
							color: 'black',
							borderWidth: '1',
							borderColor: 'gray',
							textStyle: {
								color: '#545454',
							},
								formatter: function(params) { //数据单位格式化  
								var relVal = params[0].name; //x轴名称  
								for (var i = 0, l = params.length; i < l; i++) {
									if (params[i].value) {
										if (i == 1) {
											relVal += '<br/><span style="color:#18b6ff;float:left">●&nbsp;</span>' + params[i].seriesName + ' : ' +
												params[i].value+" 人&nbsp;";
										}else if(i == 2) {
											relVal += '<br/><span style="color:#6fd5ff;float:left">●&nbsp;</span>  ' + params[i].seriesName + ' : ' +
												params[i].value+" 人&nbsp;";
										}else{
											relVal += '<br/><span style="color:#0092ee;float:left">●&nbsp;</span>  ' + params[i].seriesName + ' : ' +
												params[i].value+" 人&nbsp;";
										}
							
									}
								}
								return relVal;
							},
						},

						xAxis: [{
							type: 'category',
							data: time
						}],
						yAxis: [{
							type: 'value',
						}],

						series: [{
								name: "高",
								type: "bar",
								data: high
							},
							{
								name: "中",
								type: "bar",
								data: middle
							},
							{
								name: "低",
								type: "bar",
								data: low
							}
						]
					};
					barChart.setOption(barChartOption);
				})
				// });
				request("/cmdb/queryCustSexBySalesID/", {
					sales_id: storageUser.UId
				}, function(result) {
					var data = result.DATASET;
					var arr = [];
					for (let i = 0; i < data.length; i++) {
						// alert(JSON.stringify(data));
						var sex = data[i].sex;
						var cnt = data[i].cnt;
						if (sex == "F") {
							sex = "女"
						} else if (sex == "M") {
							sex = "男"
						} else {
							sex = data[i].sex;
						}
						arr.push({
							name: sex,
							value: cnt
						});

					}
					var pieChartDiv1 = document.getElementById("pieChart1");
					var pieChart1 = echarts.init(pieChartDiv1);

					var chartOption1 = {
					noDataLoadingOption: {
					text: '暂无数据',
					effect: 'bubble',
					effectOption: {
						   backgroundColor: "#FFFFFF",
						effect: {
							n: 0
						}
					}
				},
						tooltip: {
							backgroundColor: 'rgba(255,255,255,0.8)',
							color: 'black',
							borderWidth: '1',
							borderColor: 'gray',
							textStyle: {
								color: '#545454',
							}
						},
						color: ['#18b6ff', '#b2e0fd', '#0da3ff', '#b0fcff'],
						calculable: false,
						series: [{
							name: "性别分布",
							type: "pie",
							radius: "90%",
							center: ["50%", "50%"],
							itemStyle: {
								normal: {
									label: {
										position: "inner",
										formatter: function(params) {
											// return params.name + ":" + params.value + "\n\r" + (params.percent - 0).toFixed(0) + "%"
											return params.name + "\n" + (params.percent - 0).toFixed(0) + "%"
										},
										textStyle: {
											fontSize: 13
										},
									},
									labelLine: {
										show: false
									}
								},
								emphasis: {
									label: {
										show: true,
										formatter: "{b}\n{d}%"
									}
								}
							},
							data: arr
						}]
					};
					pieChart1.setOption(chartOption1);

				});


				request("/cmdb/queryCustMarriageBySalesID/", {
					sales_id: storageUser.UId
				}, function(result) {
					var data = result.DATASET;
					var arr = [];
					for (let i = 0; i < data.length; i++) {
						var hyclass = data[i].marriagechild;
						if (hyclass == "00") {
							hyclass = "未婚";
						} else if (hyclass == "10") {
							hyclass = "已婚无小孩";
						} else if (hyclass == "11" || hyclass == "12") {
							hyclass = "已婚有小孩";
						}
						var cnt = data[i].cnt;
						arr.push({
							name: hyclass,
							value: cnt
						});
					}

					var pieChartDiv2 = document.getElementById("pieChart2");
					var pieChart2 = echarts.init(pieChartDiv2);
					var chartOption2 = {
						noDataLoadingOption: {
						text: '暂无数据',
						effect: 'bubble',
						effectOption: {
							   backgroundColor: "#FFFFFF",
							effect: {
								n: 0
							}
						}
					},
						tooltip: {
							backgroundColor: 'rgba(255,255,255,0.8)',
							color: 'black',
							borderWidth: '1',
							borderColor: 'gray',
							textStyle: {
								color: '#545454',
							}
						},
						color: ['#b0fcff', '#18b6ff', '#0da3ff', '#b2e0fd'],
						calculable: false,
						series: [{
							name: "婚姻情况",
							type: "pie",
							radius: "90%",
							center: ["50%", "50%"],
							itemStyle: {
								normal: {
									label: {
										position: "inner",
										formatter: function(params) {
											return params.name + "\n" + (params.percent - 0).toFixed(0) + "%"
										},
										textStyle: {
											fontSize: 11
										},
									},
									labelLine: {
										show: false
									}
								},
								emphasis: {
									label: {
										show: true,
										formatter: "{b}\n{d}%"
									}
								}
							},
							data: arr
						}]
					};
					pieChart2.setOption(chartOption2);

				});


				request("/cmdb/queryCustAgeBySalesID/", {
					sales_id: storageUser.UId
				}, function(result) {
					var data = result.DATASET;
					var arr = [];
					for (let i = 0; i < data.length; i++) {
						var age = data[i].ext_age;
						var cnt = data[i].cnt;
						arr.push({
							name: age,
							value: cnt
						});
					}
					// alert(JSON.stringify(arr))

					var pieChartDiv3 = document.getElementById("pieChart3");
					var pieChart3 = echarts.init(pieChartDiv3);

					var chartOption3 = {
						noDataLoadingOption: {
						text: '暂无数据',
						effect: 'bubble',
						effectOption: {
							   backgroundColor: "#FFFFFF",
							effect: {
								n: 0
							}
						}
					},
						tooltip: {
							backgroundColor: 'rgba(255,255,255,0.8)',
							color: 'black',
							borderWidth: '1',
							borderColor: 'gray',
							textStyle: {
								color: '#545454',
							}
						},
						color: ['#b0fcff', '#18b6ff', '#0da3ff', '#b2e0fd'],
						calculable: false,
						series: [{
							name: "年龄分布",
							type: "pie",
							radius: "90%",
							center: ["50%", "50%"],
							itemStyle: {
								normal: {
									label: {
										position: "inner",
										formatter: function(params) {
											return params.name + "\n" + (params.percent - 0).toFixed(0) + "%"
										},
										textStyle: {
											fontSize: 11
										},
									},
									labelLine: {
										show: false
									}
								},
								emphasis: {
									label: {
										show: true,
										formatter: "{b}\n{d}%"
									}
								}
							},
							data: arr
						}]
					};
					pieChart3.setOption(chartOption3);

				});


				request("/cmdb/queryCustAssetBySalesID/", {
					sales_id: storageUser.UId
				}, function(result) {
					var data = result.DATASET;
					var arr = [];
					// alert(JSON.stringify(data));
					for (let i = 0; i < data.length; i++) {
						var money = data[i].ext_consumption;
						if (money == "0") {
							money = "低消费"
						} else if (money == "1") {
							money = "中消费"
						} else {
							money = "高消费"
						}
						var cnt = data[i].cnt;
						arr.push({
							name: money,
							value: cnt
						});
					}

					var pieChartDiv4 = document.getElementById("pieChart4");
					var pieChart4 = echarts.init(pieChartDiv4);

					var chartOption4 = {
						noDataLoadingOption: {
						text: '暂无数据',
						effect: 'bubble',
						effectOption: {
							   backgroundColor: "#FFFFFF",
							effect: {
								n: 0
							}
						}
					},
						tooltip: {
							backgroundColor: 'rgba(255,255,255,0.8)',
							color: 'black',
							borderWidth: '1',
							borderColor: 'gray',
							textStyle: {
								color: '#545454',
							}
						},
						color: ['#b0fcff', '#18b6ff', '#0da3ff', '#b2e0fd'],
						calculable: false,
						series: [{
							name: "资产分布",
							type: "pie",
							radius: "90%",
							center: ["50%", "50%"],
							itemStyle: {
								normal: {
									label: {
										position: "inner",
										formatter: function(params) {
											return params.name + "\n" + (params.percent - 0).toFixed(0) + "%"
										},
										textStyle: {
											fontSize: 11
										},
									},
									labelLine: {
										show: false
									}
								},
								emphasis: {
									label: {
										show: true,
										formatter: "{b}\n{d}%"
									}
								}
							},
							data: arr
						}]
					};
					pieChart4.setOption(chartOption4);
				});






			});
		</script>
	</body>

</html>
